<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.nav{
			border:2px solid blue;
			padding-left: 0;
			width:500px;
			margin:200px auto;
		}
		.a1{
			list-style: none;
			border:1px solid red;
			display: inline-block;
			width:120px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
		/*二级菜单定位 position*/
		#b1{
			position: relative;
		}
		.subnav{
			position: absolute;
			border:1px solid green;
			display: none;
		}
		#b1:hover .subnav{
			display: block;
		}
		.span{
			position: absolute;
			border:1px solid green;
			display: none;
		}
		#c1{
			position: relative;
		}
		#c1:hover .span{
			display: block;
		}
		.bane{
			position: absolute;
			border:1px solid green;
			display: none;
		}
		#d1{
			position: relative;
		}
		#d1:hover .bane{
			display: block;
		}

	</style>
</head>
<body>
	<ul class="nav">
		<li class="a1" id="b1">网站首页
			<ul class="subnav">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li class="a1"id="c1">网站首页
			<ul class="span">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
		<li class="a1"id="d1">网站首页
			<ul class="bane">
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
				<li>二级菜单</li>
			</ul>
		</li>
	</ul>
</body>
</html>